<template>
	<!-- todo：各种情况要显示的参数 -->
	<view class="order-item">
		<view class="title-box uni-flex">
			<view class="title-text">{{item.institutionName}}</view>
			<image class="title-icon" src="../../../static/image/user/phone.png" @click="phoneCall"></image>
			<!-- todo: 待缴费 已报名 已退款 三个状态class不通过 显示颜色不同 -->
			<view class="title-status"
			      :class="[data.status === 'UNPAID' ? 'title-topay' : '',
				           data.status === 'REGISTERED' ? 'title-registered' : '',
						   data.status === 'REFUNDED' ? 'title-refund' : '']">
			    {{ item.statusTrans }}
			</view>
		</view>
		<view class="content-box uni-flex" @tap="_onClick(item)">
			<!-- 课程图片 -->
			<view class="uni-flex content-box-left" v-if="item.type === 'course'">
				<image class="content-image" :src="item.cover"></image>
			</view>
			<!-- 活动海报 -->
			<view class="uni-flex content-box-left" v-if="item.type === 'activity'">
				<image class="content-image-activity" :src="item.cover"></image>
			</view>
			<view class="uni-flex uni-column content-box-right">
				<view class="content-text">
					<text>
						{{item.name}}
					</text>
				</view>
				<view class="content-tag" v-if="item.type === 'course'">
					<uni-tag :text="`${item.courseNodes}节`"
						custom-style="font-size: 24rpx; background-color: #ffffff; border-color: #F5C834; color: #F5C834;">
					</uni-tag>
				</view>
				<view class="content-time" v-if="item.type === 'activity'">
					<text>截止时间：{{item.deadline}}</text>
				</view>
			</view>
		</view>
		<view class="fee-box">
			<view class="fee-item uni-flex">
				<text>已付预约费：</text>
				<text>{{item.registrationFee}}积分</text>
			</view>
			<view class="fee-item uni-flex" v-if="item.type === 'course' && item.status === 'UNPAID'">
				<text>待付报名费：</text>
				<text>￥{{item.priceWithCash}}(线下缴费)</text>
			</view>
			<view class="fee-item uni-flex" v-if="item.type === 'course' && item.status !== 'UNPAID'">
				<text>已付报名费：</text>
				<text>￥{{item.priceWithCash}}(线下缴费)</text>
			</view>
			<view class="fee-item refund-text" v-if="item.status === 'REFUNDED'">
				<text>金额已原路退回</text>
			</view>
		</view>
		<!-- <view class="fee-box" v-if="item.status === 'UNPAID'">
			<view class="fee-item uni-flex">
				<text>缴费时间：</text>
				<text>{{item.paymentTime}}</text>
			</view>
			<view class="fee-item uni-flex">
				<text> 缴费地点：</text>
				<text>{{item.address}}</text>
			</view>

		</view> -->
	</view>
</template>

<script>
	export default {
		name: "OrderItem",
		emits: ['clickItem'],
		props: {
			data: Object
		},
		data() {
			return {
				item: {},
				activity: {},
				course: {}
			}
		},
		mounted() {
			const param = this.data
			const type = this.data.type.toLowerCase() // 类型: 活动/课程
			let finalParam = {}
			const statusTrans = {
				REGISTERED: '已报名',
				UNPAID: '待缴费',
				REFUNDED: '已退款'
			}
			if (type === 'activity') { // 活动
				finalParam = {
					type, // 类型：课程/活动
					institutionName: param[type].institutionName || '', // 活动主办方名称
					mobile: param[type].personInChargeMobile || '', // 活动负责人电话
					status: param.status || '', // 状态
					statusTrans: statusTrans[param.status] || '',
					cover: param[type].cover || '', // 封面
					name: param[type].name || '', // 名称
					deadline: param[type].registrationDeadline || '', // 报名截止时间
					registrationFee: param[type].registrationFee ?? '', // 已付预约费
					id: param.id,
					activityId: param[type].id || '' // 活动id
				}
			} else if (type === 'course') { // 课程
				finalParam = {
					type, // 类型：课程/活动
					institutionName: param[type].institutionName || '', // 服务机构
					mobile: param[type].institutionMobile || '', // 服务机构负责人手机号
					status: param.status || '', // 状态
					statusTrans: statusTrans[param.status] || '', // 状态翻译
					cover: param[type].cover || '', // 封面
					courseNodes: param[type].courseNodes || '', // 课时数
					registrationFee: param[type].priceWithScore ?? '', // 已付预约费
					priceWithCash: param[type].priceWithCash ?? '', // 已付报名费
					id: param.id,
					paymentTime: param.paymentTime || '', // 缴费时间
					address: param[type].address || '',// 缴费地点
					name: param[type].name || '' // 名称
				}
			}
			this.item = finalParam
		},
		methods: {
			_onClick(item) {
				this.$emit('clickItem', item)
			},
			// 拨打号码
			phoneCall() {
				uni.makePhoneCall({
				    phoneNumber: this.item.mobile
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-item {
		margin: 20rpx 18rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;

		.title-box {
			padding: 38rpx 24rpx;
			align-items: center;

			.title-text {
				-webkit-flex: 1;
				flex: 1;
				font-size: 32rpx;
			}

			.title-icon {
				width: 28rpx;
				height: 36rpx;
			}

			.title-status {
				margin-left: 40rpx;
				font-size: 26rpx;
			}
			.title-topay {
				color: #56D100;
			}
			.title-registered {
				color: #00CABC;
			}
			.title-refund {
				color: #FF6C25;
			}

		}

		.content-box {
			padding: 24rpx;
			.content-box-left {
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-align-items: center;
				align-items: center;

				.content-image {
					width: 152rpx;
					height: 152rpx;
				}
				.content-image-activity {
					width: 220rpx;
					height: 100%;
				}
			}

			.content-box-right {
				-webkit-flex: 1;
				flex: 1;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				padding-left: 34rpx;
				.content-text {
					height: 92rpx;
					line-height: 52rpx;
					font-size: 30rpx;
					text-align: left;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.content-time {
					color: #333333;
					font-size: 24rpx;
				}
				.content-tag {
					margin-top: 18rpx;
				}
			}
		}
		.fee-box {
			margin: 0 24rpx;
			padding: 16rpx 0;
			border-top: 1px dashed  #E0E0E0;
			.fee-item {
				-webkit-justify-content: space-between;
				justify-content: space-between;
				font-size: 24rpx;
				line-height: 42rpx;
				// margin-top: 16rpx;
			}
			.refund-text {
				text-align: right;
				color: #FF6C25;
			}
		}

	}
</style>
